<template>
  <div class="hello">
    <div class="json" style="width: 100%;">
      <!-- <div class="input1" placeholder="json" contenteditable="true" style="border: 1px solid #000;padding:10px 10px;" v-html="json" /> -->
      <el-input v-model="json" type="textarea" autosize style="width: 100%;" placeholder="json" @change="jsonChange" />
      <!-- <div style="border: 1px solid #000;">
        {{ json }}
      </div> -->
    </div>
    <div style="text-align: center;margin: 10px 0">
      <el-button type="primary" icon="el-icon-bottom" @click="handleParse" />
      <el-button type="primary" icon="el-icon-top" @click="handleJson" />
    </div>
    <div class="json" style="width: 100%;" v-if="univerVisible">
      <UniverSheet id="sheet" :type="'univer'" ref="univerRef" :data="univer" />
      <!-- <div class="input" contenteditable="true" placeholder="univer" style="border: 1px solid #000;padding:10px 10px;" v-html="univer" /> -->
      <!-- <el-input v-model="univer" type="textarea" autosize style="width: 100%;" placeholder="univer" /> -->
    </div>
  </div>
</template>

<script>
import UniverSheet from '@/components/Univer/UniverSheet.vue'
export default {
  name: 'HelloWorld',
  components: {
    UniverSheet
  },
  data() {
    return {
      json: null,
      univer: null,
      univerVisible: false
    }
  },
  mounted() {
  },
  methods: {
    handleParse() {
      this.univer = JSON.parse(this.json)
      this.univerVisible = false
      setTimeout(() => {
        this.univerVisible = true
      }, 1000)
      console.log(this.univer, '----------------------univer')
    },
    jsonChange() {
      // this.univerVisible = false
      // this.handleParse()
    },
    handleJson() {
      const result = this.$refs.univerRef?.getData()
      this.json = JSON.stringify(result)
      // this.univerVisible = false
      console.log(this.json, '----------------------json')
      // this.univer = null
    }
  }
}
</script>
<style lang="scss" scoped>
.json{
  ::v-deep .el-input__inner {
    height: 500px;
    line-height: 500px;
  }

}
.input {
    height: 140px; // 设置高度
    overflow-y: auto; // 超多的部分出现滚动条
    &:empty::before { // placeholder设置
      content: attr(placeholder);
      font-size: 14px;
      color: #CCC;
      line-height: 21px;
      padding-top: 20px;
    }
  }
.input1 {
    height: 140px; // 设置高度
    overflow-y: auto; // 超多的部分出现滚动条
    &:empty::before { // placeholder设置
      content: attr(placeholder);
      font-size: 14px;
      color: #CCC;
      line-height: 21px;
      padding-top: 20px;
    }
  }
</style>
